<template>
    <div class="page">
		<el-dialog :visible.sync="shareValue" style="width: 800px; margin: auto">
			<share-card v-if="loading" :qid="questionnaireList[index].id"></share-card>
		</el-dialog>
        <span class="tittle">问卷列表</span>
		<el-dropdown style="margin-left: 20px" @command="handleCommand">
			<span class="el-drop-link">
				{{sort}}<i class="el-icon-d-caret"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="a">创建时间倒序</el-dropdown-item>
				<el-dropdown-item command="b">创建时间正序</el-dropdown-item>
				<el-dropdown-item command="c">发布时间倒序</el-dropdown-item>
				<el-dropdown-item command="d">发布时间正序</el-dropdown-item>
				<el-dropdown-item command="e">回收量倒序</el-dropdown-item>
				<el-dropdown-item command="f">回收量正序</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<el-input placeholder="请输入问卷标题" v-model="input1" style="width: 300px; float: right; margin-right: 80px;"></el-input>
		<el-button @click="handleSearch" circle style="float: right; margin-right: 10px">
			<i class="el-icon-search"></i>
		</el-button>
		<div v-for="(item, index) in questionnaireList" :key="index">
		<el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix" style="color: #2b2b57">
                <span style="font-size: 20px; cursor: pointer" @click="operation1('guide', index)">{{item.tittle}}</span>
				<span class="attribute" v-if="item.pubTime == null" style="color: orange; font-weight: bold">未发布</span>
                <span class="attribute" v-else-if="item.isOpen == false" style="color: red; font-weight: bold">已关闭</span>
				<span class="attribute" v-else style="color: green; font-weight: bold">已开启</span>
                <span class="attribute">创建时间：{{item.creTime}}</span>
				<span class="attribute">回收量：{{item.ansCount}}</span>
				<span class="attribute">问题数：{{item.queCount}}</span>
            </div>
            <div style="font-size: 14px">
                <span @click="operation1('questionnare', index)" style="cursor: pointer">
					<svg class="myicon" aria-hidden="true" style="font-size: 20px"><use xlink:href="#myicon-bianji"></use></svg> 编辑
				</span>
				<span @click="operation1('preview', index)" style="cursor: pointer; margin-left: 10px">
					<svg class="myicon" aria-hidden="true"><use xlink:href="#myicon-yulan3"></use></svg> 预览
				</span>
				<span @click="operation1('analysis', index)" style="cursor: pointer; margin-left: 10px">
					<svg class="myicon" aria-hidden="true"><use xlink:href="#myicon-icon-test"></use></svg> 数据分析
				</span>
                <span class="operation" @click="operation2('del', index)">
					<svg class="myicon" aria-hidden="true" style="font-size: 21px"><use xlink:href="#myicon-shanchu1"></use></svg> 删除
				</span>
                <span class="operation" @click="operation2('copy', index)">
					<svg class="myicon" aria-hidden="true" style="font-size: 21px"><use xlink:href="#myicon-fuzhi"></use></svg> 复制
				</span>
				<span v-if="item.pubTime == null" class="operation" @click="operation2('switch', index)">
					<svg class="myicon" aria-hidden="true"><use xlink:href="#myicon-fabu-"></use></svg> 发布
				</span>
                <span v-else-if="item.isOpen" class="operation" @click="operation2('switch', index)">
					<svg class="myicon" aria-hidden="true"><use xlink:href="#myicon-daochu1024-16"></use></svg> 关闭
				</span>
				<span v-else class="operation" @click="operation2('switch', index)">
					<svg class="myicon" aria-hidden="true"><use xlink:href="#myicon-daochu1024-15"></use></svg> 开启
				</span>
				<span v-if="item.isOpen" class="operation" @click="share(index)">
					<svg class="myicon" aria-hidden="true"><use xlink:href="#myicon-erweima1"></use></svg> 分享
				</span>
            </div>
        </el-card>
		</div>
    </div>
</template>

<script>
import {getQuestionnaireMsg, sortQuestionnaire, questionnaireSwitch, copyQuestionnaire, delQuestionnaire, searchQuestionnaire} from "../../api";
import shareCard from '@/components/shareCard.vue'
import moment from 'moment';
export default ({
    data() {
        return {
            uid: '',
            questionnaireList: [],
			input1: '',
			sort: '创建时间倒序',
			shareValue: false,
			index: 0,
			loading: false
        }
    },
    mounted() {
        this.initData();
    },
    methods: {
        async initData() {
			if (this.$store.state.uid == -1) {
				this.$message({
					message: '请先登录',
					type: 'warning'
				})
				this.$router.push('/');
			}
			this.uid = this.$store.state.uid;
			await getQuestionnaireMsg(this.uid).then(res => {
				console.log(res)
				res.elemList.forEach(item => {
					let q = {};
					q.id = item.id;
					q.tittle = item.title;
					q.creTime = item.creation_time.substring(0, 10);
					if (item.publish_time != null) {
						q.pubTime = item.publish_time.substring(0, 10);
					}
					q.ansCount = item.answer_count;
					q.queCount = item.question_count;
					q.isOpen = item.open;
					q.type=item.type;
					this.questionnaireList.push(q);
				})
			});
			this.loading = true;
			this.$forceUpdata();
        },
		operation1(str, index) {
			let questionnaire = this.questionnaireList[index];
            var encode_qid = this.$UrlEncode.encode(JSON.stringify(questionnaire.id * 1234));
			var encode_index = this.$UrlEncode.encode(JSON.stringify(index * 1234));
			if(str=='questionnare'){
				if(questionnaire.type=='E'){

				this.$router.push({name: 'examquestionnare', query: {questionnaireId: encode_qid, index: encode_index}});
				}
				else if(questionnaire.type=='V'){
					this.$router.push({name: 'votequestionnare', query: {questionnaireId: encode_qid, index: encode_index}});
				}
				else if(questionnaire.type=='N'){
					this.$router.push({name: 'normalquestionnare', query: {questionnaireId: encode_qid, index: encode_index}});
				}
				else if(questionnaire.type=='A'){
					this.$router.push({name: 'applyquestionnare', query: {questionnaireId: encode_qid, index: encode_index}});
				}
				else if(questionnaire.type=='Y'){
					this.$router.push({name: 'yiqingquestionnare', query: {questionnaireId: encode_qid, index: encode_index}});
				}
			}
			else{
				this.$router.push({name: str, query: {questionnaireId: encode_qid, index: encode_index}});
			}
			
		},
		operation2(str, index) {
			let questionnaire = this.questionnaireList[index];
			if (str == 'switch') {
				let open;
				if (questionnaire.isOpen == true) {
					open = 'false';
				} else {
					open = 'true';
				}
				questionnaireSwitch(this.uid, questionnaire.id, open).then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							questionnaire.isOpen = !questionnaire.isOpen;
							if (questionnaire.pubTime == null) {
								questionnaire.pubTime = ''	//赋一个空字符串的值用于判断即可
							}
							this.$set(this.questionnaireList, index, questionnaire);
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
						case 3:alert("问卷不存在");break;
					}
				})
			} else if (str == 'copy') {

				let copy = {};
				//复制标题，重置创建时间
				copy.tittle = questionnaire.tittle + '-副本';
				copy.creTime = moment().format('YYYY-MM-DD');
				//设置默认值
				copy.publish_time = null;
				copy.ansCount = 0;
				copy.queCount = 0;
				copy.isOpen = false;

				copyQuestionnaire(this.uid, questionnaire.id).then(res => {
					copy.tittle += res.copy_count;
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.$message({
								message: '复制成功',
								type: 'success',
								duration: 1000
							});
							copy.id = res.new_questionnaire_id;	//获取新id
							this.questionnaireList.splice(0, 0, copy);
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
						case 3:alert("被复制问卷不存在");break;
					}
				})
			} else if (str == 'del') {
				delQuestionnaire(this.uid, questionnaire.id).then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1000
							});
							this.questionnaireList.splice(index, 1);
							if (index == 0) {
								this.loading = false;

							}
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
						case 3:alert("问卷已删除");break;
					}
				})
			}
		},
		handleSearch() {
			searchQuestionnaire(this.uid, this.input1).then(res => {
				const x = res.error_code;
				switch (x){
					case -1:alert("未知错误");break;
					case 0:
						this.$message({
							message: '搜索成功',
							type: 'success',
							duration: 1000
						});
						this.resetQuestionnaireList(res.outList);	
						break;
					case 1:alert("请求参数错误");break;
					case 2:alert("用户不存在");break;
				}
			})
		},
		handleCommand(command) {
			let questionnaireIdList = [];
			this.questionnaireList.forEach(item => {
				questionnaireIdList.push(item.id)
			})
			if (command == 'a') {
				sortQuestionnaire(questionnaireIdList, 'creation_time', 'true').then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.resetQuestionnaireList(res.sortList);
							this.sort = "创建时间倒序";
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
					}
				})
			} else if (command == 'b') {
				sortQuestionnaire(questionnaireIdList, 'creation_time', 'false').then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.resetQuestionnaireList(res.sortList);	
							this.sort = "创建时间正序";
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
					}
				})
			} else if (command == 'c') {
				sortQuestionnaire(questionnaireIdList, 'publish_time', 'true').then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.resetQuestionnaireList(res.sortList);
							this.sort = "发布时间倒序";
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
					}
				})
			} else if (command == 'd') {
				sortQuestionnaire(questionnaireIdList, 'publish_time', 'false').then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.resetQuestionnaireList(res.sortList);
							this.sort = "发布时间正序";	
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
					}
				})
			} else if (command == 'e') {
				sortQuestionnaire(questionnaireIdList, 'answer_count', 'true').then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.resetQuestionnaireList(res.sortList);
							this.sort = "回收量倒序";	
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
					}
				})
			} else {
				sortQuestionnaire(questionnaireIdList, 'answer_count', 'false').then(res => {
					const x = res.error_code;
					switch (x){
						case -1:alert("未知错误");break;
						case 0:
							this.resetQuestionnaireList(res.sortList);
							this.sort = "回收量正序";	
							break;
						case 1:alert("请求参数错误");break;
						case 2:alert("用户不存在");break;
					}
				})
			}
		},
		resetQuestionnaireList(newList) {
			this.questionnaireList.splice(0, this.questionnaireList.length);
			newList.forEach((item, index) => {
				let r = {};
				r.id = item.id;
				r.tittle = item.title;
				r.ansCount = item.answer_count;
				r.queCount = item.question_count;
				r.creTime = item.creation_time.substring(0, 10);
				if (item.publish_time != null) {
					r.pubTime = item.publish_time.substring(0, 10);
				}
				r.isOpen = item.open;
				this.$set(this.questionnaireList, index, r);
			})	
		},
		share(index) {
			this.index = index;
			this.shareValue = true;
		}
    },
    components: {
		shareCard
    },
	watch: {

	}
})
</script>

<style>
.tittle {
    font-size: 25px;
    font-weight: bold;
	color: #2b2b57;
}
.el-card {
    margin-top: 30px;
    min-height: 100px;
    margin-right: 60px;
	margin-left: 420px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
.attribute {
    float: right;
    margin-right: 15px;
}
.operation {
	float: right;
	margin-right: 20px;
	cursor: pointer;
}
.myicon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
	font-size: 20px;
}
</style>